<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px" class="aside">
                <el-scrollbar>
                    <el-menu :default-openeds="['1', '3']">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <Dish />
                                </el-icon>商品管理
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1" @click="$router.push({ name: 'products' })">商品列表</el-menu-item>
                                <el-menu-item index="1-2" @click="$router.push({ name: 'sort' })">商品分类</el-menu-item>
                                <el-menu-item index="1-3">添加产品</el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                    </el-menu>
                </el-scrollbar>

            </el-aside>
            <el-container>
                <el-header class="header">
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item v-for="item in titleList" :to="{path:item.path}">{{ item.title }}</el-breadcrumb-item>
                    </el-breadcrumb>

                </el-header>
                <el-main class="main">
                    
                    <router-view></router-view>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'

import { useRoute } from 'vue-router';
import { computed } from 'vue';

const route = useRoute();
//只在创建阶段执行了最初的一遍
const titleList = computed(()=>route.matched.map((rou)=> ({title:rou.meta.title,path:rou.path})));
console.log(route);
console.log(titleList);



    // import {ref,reactive,toRef,toRefs} from 'vue'
    // const person = reactive({
    //     name:'cp',
    //     age:18
    // });

    // const {name,age} = toRefs(person);
    // console.log(name.value);
    // console.log(age);

</script>

<style scoped>
.aside {
    box-shadow: 1px 0px 3px 1px rgb(40, 45, 49);
}

.header {
    box-shadow: 1px 0px 3px 1px rgb(40, 45, 49);
    display: flex;
    align-items: center;
}

.main {
    box-shadow: 1px 0px 3px 1px rgb(40, 45, 49);
}
</style>

